<template>
  <div class="bg">
    <img :src="currentImage" alt="" class="bg-image">
    <div class="press pulse" @click="again">
      <div class="press-inner">
        <img src="https://i-blog.csdnimg.cn/direct/d1bce2f0d1e84d19845d88cd4e4193c3.gif" alt="">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'failure',
  methods: {
    again() {
      this.$store.commit('SET_STAGE', 1)
      this.$router.replace('/game')
    },
    showRandomImage() {
      const randomIndex = Math.floor(Math.random() * this.images.length);
      this.currentImage = this.images[randomIndex];
    }
  },
  data() {
    return {
      images : [
        'https://i-blog.csdnimg.cn/direct/36ded33d5a814a90956069f29435a280.jpeg',
        'https://img-blog.csdnimg.cn/direct/4f6e3204738c413190f57e434855a313.png',
        'https://i-blog.csdnimg.cn/direct/06cebf8ae6b045df9dbcafba1b07c0a4.png',
        'https://img-blog.csdnimg.cn/direct/e7ed30ead65544d9981a306863c8092d.jpeg',
        'https://img-blog.csdnimg.cn/direct/1580bb18050e4a99b90074fdd270d327.jpeg',
        'https://img-blog.csdnimg.cn/direct/2908933454f0410aa890f990f17ac5cf.jpeg',
        'https://img-blog.csdnimg.cn/direct/80f88f48f6954a299a9d74486c769193.jpeg',
        'https://img-blog.csdnimg.cn/direct/e32110bd3941421abfafba9bd9a8c84b.jpeg',
        'https://img-blog.csdnimg.cn/f6c4fedca549456f979f53611415a044.png',
        'https://img-blog.csdnimg.cn/6ab0dbb87f4f44d09fb1e5c4b660d3a0.jpeg',
        'https://img-blog.csdnimg.cn/fe5d4d354ab84701928f25b72591e166.png',
        'https://img-blog.csdnimg.cn/36e1fcd2a15245b7a2c0f6fd4882609c.png',
        'https://img-blog.csdnimg.cn/2e4befaa420d4ae39a57d1f0da8cd694.png'
      ],
      currentImage : ''
    }
  },
  beforeMount() {
    this.showRandomImage();
  }
}
</script>

<style scoped>
.bg {
  width: 100%;
  height: 1500px;
  position: relative;
  background: radial-gradient(#333, #222);
  overflow: hidden;
}

.bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(80%);
  transition: filter 1s;
}

.press {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 150px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  transition: transform 0.5s, box-shadow 0.3s;
}

.press-inner {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.press:hover {
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
  transform: translate(-50%, -50%) scale(1.1);
}

.pulse {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}
</style>